<template>
	<view class="content" style="padding-top:30%;">
		<wheelDraw :winIndex="winIndex" @routingBefore="routingBefore" @routingFinish="routingFinish"  ref='wheelDraw' :init="true" :prizeList="turnTableList" :wh="300" :lightSpeed="500"></wheelDraw>
	</view>
</template>
<script>
	import wheelDraw from '@/components/wheelDraw/wheelDraw.vue'
	export default {
		components: {
			wheelDraw
		},
		data() {
			return {
				winIndex:1,
				turnTableList:[
					"一等奖",
					"谢谢参与",
					"二等奖",
					"谢谢参与",
					"三等奖",
					"谢谢参与",
				]
			}
		},
		onLoad() {
			//初始化方法
			//this.$refs.wheelDraw.drawInit()
		},
		// onShow() {
		// 	let that = this;
		// 	uni.request({
		// 		url:'http://hmc.zanboon.com/hmc/mobile_terminal/big_turntable',
		// 		data:{
		// 			token:'YQyoINZJPeMRdkbKxh1m',
		// 			activity_id:'1'
		// 		},
		// 		success(res) {
		// 			that.turnTableList.splice(0)
		// 			console.log(res,'res');
		// 			// console.log(res.data.result.turntablelist,'res1111');
		// 			that.turnTableList = res.data.result.turntablelist;
		// 			console.log(that.turnTableList,'11111');
		// 		},
		// 		fail() {
		// 			
		// 		}
		// 	})
		// },
		methods: {
			routingBefore(){
				console.log('抽奖开始！')
				this.$refs.wheelDraw.routing() //开始转动
			},
			routingFinish(){
				let no=this.turnTableList[this.winIndex];
				if(no=='谢谢参与'){
					uni.showModal({
						content: '很遗憾您未中奖，再接再厉',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}else{
					uni.showModal({
						title: '中奖提示',
						content: '恭喜你获得'+this.turnTableList[this.winIndex]+'油卡100元优惠券',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}	
			},
		}
	}
</script>

<style>
	page{
		background: mediumturquoise;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200upx;
		width: 200upx;
		margin-top: 200upx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50upx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36upx;
		color: #8f8f94;
	}
</style>
